<template>
    <el-header class="header">
        <div class="top">
            <div class="left">
                <i class="el-icon-s-fold" v-if="!collapse" @click="collapse = !collapse"></i>
                <i class="el-icon-s-unfold" v-else @click="collapse = !collapse"></i>
                <span>{{ routerTitle }}</span>
            </div>
            <el-dropdown @command="onCommand1">
                <div class="right">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    <span>{{ userInfo.username }}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">修改密码</el-dropdown-item>
                    <el-dropdown-item command="2">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="bottom">
            <!-- @tab-click="handleClick" -->
            <el-tabs v-model="activeName" @tab-click="onTabClick" closable @tab-remove="onTabRemove">
                <el-tab-pane :label="item.title" :name="item.path" v-for="item in tabList"
                    :key="item.path"></el-tab-pane>
            </el-tabs>
            <el-dropdown @command='onCommand2'>
                <div class="right">
                    <i class="el-icon-arrow-down"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">关闭当前标签页</el-dropdown-item>
                    <el-dropdown-item command="2">关闭其他标签页</el-dropdown-item>
                    <el-dropdown-item command="3">关闭全部标签页</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <UpDatePassword ref="upDate" v-if="show" @close="show = false"></UpDatePassword>
    </el-header>
</template>

<script>
import { logOutAPI } from '@/http'
import { confirm, clearLoginInfo } from '@/utils'
import { mapMutations, mapState } from 'vuex'
import UpDatePassword from './UpDatePassword.vue'
export default {
    name: 'header-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            // up: true,
            userInfo: {},
            show: false,
        }
    },
    components: {
        UpDatePassword
    },
    computed: {
        ...mapState(['routerTitle', 'tabList']),
        collapse: {
            get() {
                return this.$store.state.collapse
            },
            set(val) {
                this.$store.commit('changeCollapse', val)
            }
        },
        activeName: {
            get() {
                return this.$store.state.activeName
            },
            set(val) {
                this.$store.commit('changeActiveName', val)
            }
        },
    },
    methods: {
        ...mapMutations(['removeTabList']),
        onTabRemove(val) {
            // console.log('vafad', val),
            this.removeTabList([val])
        },
        onTabClick(tab) {
            // console.log('tab点击', val.name);
            this.$router.push(tab.name)

        },
        onCommand1(val) {
            if (val == 1) {
                console.log('修改密码');
                this.show = true;
                this.$nextTick(() => {
                    this.$refs.upDate.open();
                })
            } else {
                console.log('退出登录');
                confirm(() => {
                    console.log('确认退出！');
                    logOutAPI().then(res => {
                        console.log('res数据：', res);
                        if (res.code === 200) {
                            console.log('退出成功！');
                            this.$message({
                                message: '退出成功！',
                                type: 'success'
                            });
                            this.$router.push('login');
                            clearLoginInfo()
                        }
                    })
                }, '退出登录')
            }
        },
        onCommand2(val) {
            let arr = []
            console.log('val', val);
            if (val == 1) {
                arr = [this.activeName]
            }
            if (val == 2) {
                arr = this.tabList.map(item => item.path).filter(item => item != this.activeName)
            }
            if (val == 3) {
                arr = this.tabList.map(item => item.path)
            }
            this.removeTabList(arr)
        },
    },
    created() {
        this.userInfo = (JSON.parse(sessionStorage.getItem('userInfo') || '{}')).user
        // console.log('user', this.userInfo);
    },
}
</script>

<style scoped lang="less">
.header {
    width: 100%;
    padding: 0;
    height: 90px !important;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: red;
        height: 50px;
        box-shadow: 0 1px 2px 1px #ccc;
        padding: 0 20px;

        .left {
            color: #333;
            font-size: 18px;

            span {
                margin-left: 20px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            span {
                color: #666;
                margin-left: 5px;
            }
        }
    }

    .bottom {
        height: 40px;
        // background-color: #ff0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        box-shadow: 0 1px 2px 1px #ccc;

        /deep/ .el-tabs__nav-wrap::after {
            display: none;
        }

        /deep/ .el-tabs__header {
            margin: 0;
        }

        .right {
            width: 40px;
            height: 40px;
            background-color: #f1f4f5;
            text-align: center;
            line-height: 40px;
        }
    }
}
</style>